<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="12rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="头像照片(500*500)" prop="avator">
					<el-upload-image v-model="formData.avator" :limit="3" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="供应商名称" prop="nickname">
					<el-input v-model="formData.nickname" clearable placeholder="请输入供应商名称"></el-input>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="老师名称" prop="name">
					<el-input v-model="formData.name" clearable placeholder="请输入老师名称"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="类型" prop="type">
					<el-select v-model="formData.type" size="mini" placeholder="请选择老师类型">
						<el-option v-for="item in typelist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="性别" prop="sex">
					<el-select v-model="formData.sex" size="mini" placeholder="请选择性别">
						<el-option v-for="item in sexlist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="标签" prop="label">
					<el-select v-model="formData.label" size="mini" multiple placeholder="请选择标签">
						<el-option v-for="item in teacherlist" :key="item.id" :label="item.major_name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="联系电话" prop="mobile">
					<el-input v-model="formData.mobile" :disabled="disabled" type="number" clearable
						placeholder="请输入联系电话"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="毕业学校" prop="school">
					<el-input v-model="formData.school" clearable placeholder="请输入毕业学校"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="专业" prop="major">
					<el-select multiple v-model="formData.major_arr" size="mini" placeholder="请选择专业">
						<el-option v-for="item in majorlist" :key="item.id" :label="item.major_name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="生日" prop="birthday">
					<el-date-picker type="date" placeholder="请选择" value-format="timestamp"
						v-model="formData.birthday"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="教龄开始时间" prop="work_start">
					<el-date-picker type="date" placeholder="请选择" value-format="timestamp"
						v-model="formData.work_start"></el-date-picker>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="教龄结束时间" prop="work_end">
					<el-date-picker type="date" placeholder="请选择" value-format="timestamp"
				  v-model="formData.work_end"></el-date-picker>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="入职时间" prop="entry_time">
					<el-date-picker type="date" placeholder="请选择" value-format="timestamp"
						v-model="formData.entry_time"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="老师简介" prop="content">
					<el-input v-model="formData.content" clearable type="textarea" placeholder="请输入老师简介"></el-input>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="教师资格证" prop="file">
					<el-upload-image v-model="formData.file" :limit="6" :title="title"></el-upload-image>
					<!-- <el-upload-file v-model="formData.file" accept=".xls,.xlsx"></el-upload-file> -->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="其他证书" prop="other_file">
					<el-upload-image v-model="formData.other_file" :limit="2" :title="title"></el-upload-image>
					<!-- <el-upload-file v-model="formData.other_file" accept=".xls,.xlsx"></el-upload-file> -->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="说明" prop="desc">
					<el-input v-model="formData.desc" clearable type="textarea" placeholder="请输入"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="24">
			    <el-form-item prop="content" label-width="0px">
			        <div style="border: 1px solid #ccc;">
			            <Toolbar
			                style="border-bottom: 1px solid #ccc"
			                :editor="editor"
			                :defaultConfig="toolbarConfig"
			                :mode="mode"
			            />
			            <Editor
			                style="height: 500px; overflow-y: auto;"
			                v-model="formData.content"
			                :defaultConfig="editorConfig"
			                :mode="mode"
			                @onCreated="onCreated"
			            />
			        </div>
			    </el-form-item>
			</el-col> -->
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
import {
	imghttp,
	get,
	post,
	del
} from '@/assets/js/http'
import {
	Editor,
	Toolbar
} from "@wangeditor/editor-for-vue";
export default {
	name: "member-search",
	props: {
		formData: {
			type: Object,
			default: () => { }
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	components: {
		"el-upload-image": () => import("@/components/el-upload-image.vue"),
		"el-upload-file": () => import("@/components/el-upload-file.vue"),
		Editor,
		Toolbar
	},
	data() {
		return {
			editor: null,
			toolbarConfig: {},
			editorConfig: {
				MENU_CONF: {
					uploadImage: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn(
								$store.getters.baseUrl+ res.data.file.url
							);
						}
					},
					uploadVideo: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl+ res.data.file.url)
						},
					},
				}
			},
			mode: "default",
			formRules: {
				avator: [{
					required: true,
					message: '请上传',
					trigger: 'change'
				}],
				type: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				},],
				name: [{
					required: true,
					message: '请输入',
					trigger: 'change'
				},],
				sex: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				},],
				label: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				},],
				mobile: [{
					required: true,
					message: "此项为必填项"
				},
				{
					min: 11,
					// pattern: /^0?1[3|4|5|6|7|8][0-9]\d{8}$/,
					message: "手机号格式错误",
					trigger: "blur"
				}
				],
				school: [{
					required: true,
					message: '请输入',
					trigger: 'change'
				},],
				major_arr: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				}],
				birthday: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				}],
				work_start: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				}],
				// work_end: [{
				// 	required: true,
				// 	message: '请选择',
				// 	trigger: 'change'
				// }],
				entry_time: [{
					required: true,
					message: '请选择',
					trigger: 'change'
				}],
				// desc: [{
				// 	required: true,
				// 	message: '请输入',
				// 	trigger: 'change'
				// }],
				// file: [{
				// 	required: true,
				// 	message: '请选择',
				// 	trigger: 'change'
				// }],
				content: {
					required: true,
					message: "此项为必填项"
				},
			},
			title: '',
			sexlist: [{
				id: 1,
				title: '男'
			}, {
				id: 2,
				title: '女'
			}, {
				id: 3,
				title: '保密'
			}], //性别1男2女3保密
			typelist: [{
				id: 1,
				title: '全职'
			}, {
				id: 2,
				title: '兼职'
			}], //类型1全职2兼职
			teacherlist: [],
			majorlist: [],
		};
	},
	beforeDestroy() {
		const editor = this.editor;
		if (editor == null) return;
		editor.destroy();
	},
	mounted() {
		this.getteacherlabel()
	},
	methods: {
		onCreated(editor) {
			this.editor = Object.seal(editor);
		},
		onConfirm() {
			// console.log(this.formData,'formData')
			// return
			this.$refs.formRef.validate((valid) => {
				if (valid) {

					this.formData.supplier_id = this.$store.state.id
					// alert('submit!');
					console.log(this.formData)
					this.$emit("search", this.formData);
					this.$parent.$emit("update:visible", false);
					this.$refs.formRef.resetFields()
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		onCancel() {
			this.$parent.$emit("update:visible", false);
			this.$refs.formRef.resetFields();
		},
		async getteacherlabel() {
			await get({
				url: '/admin/project.Teacher/major_index',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						type: 2, //1专业2老师标签3职业4志愿者标签
						limit: 9999,
						// search_time:this.searchParam.search_time.length?this.searchParam.search_time.join(' - '):''
					}
				}
			}).then(res => {
				this.teacherlist = res.list
			})
			await get({
				url: '/admin/project.Teacher/major_index',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						type: 1, //1专业2老师标签3职业4志愿者标签
						limit: 9999,
						// search_time:this.searchParam.search_time.length?this.searchParam.search_time.join(' - '):''
					}
				}
			}).then(res => {
				this.majorlist = res.list
				// this.searchParam.total = res.total
				// this.importindex = []
				// this.$loading().close()
			})
		}
	}
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
